<template>
  <div class="main">

    <div class="data">
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
        <el-radio-button label="1">日盘</el-radio-button>
        <el-radio-button label="2">周盘</el-radio-button>
        <el-radio-button label="3">月盘</el-radio-button>
      </el-radio-group>
      <div class="block">
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <el-popover
        placement="right-end"
        title="直播商品类目介绍:"
        width="800"
        trigger="hover"
      >
        <p>
          热门主播榜挖掘了周期时间内表现较为突出的红人主播，并设置了直播销量、直播销售额、涨粉数等多种排序功能，供用户全方位评估上榜主播的带货能力、吸粉能力及变现能力。
        </p>

        <p slot="reference" style="font-size: 14px">
          直播类目大盘【 统计时间: 9月29日】<i
            class="el-icon-question"
          ></i>
        </p>
      </el-popover>
    </div>
    
    <hr style="height: 1px; border: none; border-top: 1px dashed #ececec" />
    <div class="cate">
      <span>店铺类型</span>
      <el-radio-group v-model="radio2" size="small">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="家居建材"></el-radio-button>
        <el-radio-button label="家用家电"></el-radio-button>
        <el-radio-button label="美妆个护"></el-radio-button>
        <el-radio-button label="时尚配饰"></el-radio-button>
        <el-radio-button label="潮流男鞋"></el-radio-button>
        <el-radio-button label="精品女装"></el-radio-button>
        <el-radio-button label="居家内衣"></el-radio-button>
        <el-radio-button label="图书教育"></el-radio-button>
        <el-radio-button label="宠物用品"></el-radio-button>
        <el-radio-button label="食品酒饮"></el-radio-button>
        <el-radio-button label="母婴用品"></el-radio-button>
        <el-radio-button label="运动户外"></el-radio-button>
        <el-radio-button label="鞋靴箱包"></el-radio-button>
        <el-radio-button label="汽车用品"></el-radio-button>
        <el-radio-button label="手机数码"></el-radio-button>
        <el-radio-button label="其他好货"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="sel">
      <el-select v-model="value" clearable placeholder="请输入抖音商品类目">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <hr style="height: 1px; border: none; border-top: 1px dashed #ececec" />
    <div class="btn">
      <button class="btn1"><i class="el-icon-download"></i>导出直播商品类目大盘</button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="序号" width="100"> </el-table-column>
        <el-table-column prop="name" label="商品类目" width="150">
        </el-table-column>
        <el-table-column prop="province" label="直播间数" width="150">
        </el-table-column>
        <el-table-column
          prop="city"
          label="直播商品"
          
          
        >
        </el-table-column>
        <el-table-column prop="address" label="直播销量" width="150">
        </el-table-column>
        <el-table-column prop="address1" label="直播销售额" width="150">
        </el-table-column>
        <el-table-column prop="address1" label="直播获赞" width="150">
        </el-table-column>
        <el-table-column prop="address1" label="观看人数" width="150">
        </el-table-column>
        <el-table-column prop="address1" label="直播涨粉" width="150">
        </el-table-column>
    
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "0",

      tabPosition: "1",
      value1: "",
      input3: "",
      radio2: "全部",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "1",
          name: "甜品零食"  ,    
          province: "445644",
          city: "零食大礼包",
          address: "741451",
          address1: "787461",
          zip: 200333,
        },
        {
          date: "2",
          name: "甜品零食",
          province: "76545",
          city: "零食大礼包",
          address: "78461",
          address1: "787461",
          zip: 200333,
        },
        {
          date: "3",
          name: "甜品零食",
          province: "745851",
          city: "零食大礼包",
          address: "876416",
          address1: "787461",
          zip: 200333,
        },
        {
          date: "4",
          name: "甜品零食",
          province: "84641",
          city: "零食大礼包",
          address: "798465",
          address1: "787461",
          zip: 200333,
        },
        {
          date: "5",
          name: "甜品零食",
          province: "146543",
          city: "零食大礼包",
          address: "465461",
          address1: "787461",
          zip: 200333,
        },
        {
          date: "6",
          name: "甜品零食",
          province: "45131",
          city: "零食大礼包",
          address: "798465",
          address1: "787461",
          zip: 200333,
        },
        {
          date: "7",
          name: "甜品零食",
          province: "46543",
          city: "零食大礼包",
          address: "131344",
          address1: "787461",
          zip: 200333,
        },
      ],
      value: "",
      title: "直播销量榜",
    };
  },
  methods: {
    handleClick(tab) {
      let ind = tab.index;
      if (ind == 0) {
        this.title = "直播销量榜";
      }
      if (ind == 1) {
        this.title = "直播销售额榜";
      }
      if (ind == 2) {
        this.title = "直播获赞榜";
      }
      if (ind == 3) {
        this.title = "观看人次榜";
      }
      if (ind == 4) {
        this.title = "直播涨粉榜";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main :deep(.is-active) {
  color: #506eff;
}
.main :deep(.el-tabs__active-bar) {
  background-color: #506eff;
}
.table {
  margin-top: 15px;
}
.data {
  width: 750px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  border-left: 4px solid #506eff;
  .el-radio-group {
    margin-bottom: 0 !important;
  }
  :deep(.el-radio-button__inner) {
    padding: 9px 15px;
  }
  :deep(.el-input__inner) {
    height: 35px !important;
  }
}
.search {
  width: 650px;
  display: flex;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 15px;
  span {
    width: 102px;
    color: #303133;
    font-weight: 700;
    font-size: 14px;
    margin-right: 20px;
  }
}
.cate {
  width: 1538px;
  display: flex;
  align-items: center;

  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #506eff;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 12px 6px 0;
    border-radius: 8px;
    padding: 0 6px;
    cursor: pointer;
  }
  span {
    width: 102px;
    color: #303133;
    font-weight: 700;
    font-size: 14px;
  }
  :deep(.el-radio-button--small .el-radio-button__inner) {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 12px 6px 0;
    border-radius: 8px;
    padding: 0 6px;
    cursor: pointer;
    border: 0;
    font-size: 14px;
  }
  :deep(.el-radio-button--small .el-radio-button__inner):hover {
    background-color: #506eff;
    color: #fff;
  }
}
.cate1 {
  width: 93%;
  display: flex;
  align-items: center;

  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #506eff;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 12px 6px 0;
    border-radius: 8px;
    padding: 0 6px;
    cursor: pointer;
  }
  span {
    width: 7%;
    color: #303133;
    font-weight: 700;
    font-size: 14px;
  }
  :deep(.el-radio-button--small .el-radio-button__inner) {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 12px 6px 0;
    border-radius: 8px;
    padding: 0 6px;
    cursor: pointer;
    border: 0;
    font-size: 14px;
  }
  :deep(.el-radio-button--small .el-radio-button__inner):hover {
    background-color: #506eff;
    color: #fff;
  }
}
.sel {
  width: 607px;
  margin-bottom: 15px;

  :deep(.el-input__inner) {
    width: 400px;
  }
}
.btn{
    width: 100%;
    position: relative;
    margin: 15px 0;
    .btn1{
      height: 26px;
      width: 180px;
      background: #8351fe;
      position: absolute;
      right: 20px;
      border: 0;
      border-radius: 20px;
      color: #fff;
    }
  }
.table {
  color: black;
  margin-top: 50px;
  :deep(.el-table thead) {
    color: black;
  }
}
</style>